<template>
  <div>
    <div class="card tr mb2">
      <el-tooltip content="显示字段筛选" placement="bottom" effect="light">
        <el-popover placement="bottom" width="200" trigger="click">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          >全选</el-checkbox>
          <el-checkbox-group v-model="showItemList" @change="handleCheckedChange">
            <el-checkbox v-for="(item,key) in allItemList" :key="key" :label="item">{{item.name}}</el-checkbox>
          </el-checkbox-group>
          <el-button slot="reference" icon="el-icon-menu" size="mini" type="primary" circle></el-button>
        </el-popover>
      </el-tooltip>
      <el-tooltip content="展开/收起表单" placement="bottom" effect="light">
        <el-button
          icon="el-icon-search"
          @click="formShow= !formShow"
          size="mini"
          type="primary"
          circle
        ></el-button>
      </el-tooltip>
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="addEntBase">新增</el-button>
      <!-- <el-button type="danger" icon="el-icon-remove" @click="deleteByIds">删除</el-button> -->
    </div>
    <div class="ep-card card ep-search" v-show="formShow">
      <el-form :model="searchForm" size="mini" label-width="80px" inline>
        <my-form-item label="客户名称">
          <el-input
            v-model="searchForm.entName"
            style="width:200px"
            size="mini"
            placeholder="请输入客户名称"
          ></el-input>
        </my-form-item>
        <my-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="init">查询</el-button>
        </my-form-item>
      </el-form>
    </div>
    <div class="ep-card card">
      <el-table :data="tableData" size="mini" ref="dragTable" border style="width: 100%">
        <!-- <el-table-column type="selection" align="center" width="50" fixed></el-table-column> -->
        <el-table-column type="index" label="序号" fixed="left" align="center" width="60"></el-table-column>
        <el-table-column
          v-for="item in allItemList"
          :key="item.key"
          :min-width="item.width||60"
          :label="item.name"
          :prop="item.key"
          align="center"
          v-if="item.show"
        ></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="view(scope.row)">查看</el-button>
            <el-button type="text" size="mini" @click="edit(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="card" style="text-align:right;">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="currentPage"
          :page-sizes="[ 10, 20,30, 40]"
          :page-size="pageSize"
          background
          layout="total, sizes, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
  </div>
</template>
<script>
const defaultFormThead = [
  { key: "entNo", name: "客户编码", show: true },
  { key: "entName", name: "客户名称", show: true },
  { key: "peoName", name: "法定代表人", show: true },
  { key: "telephone", name: "联系电话", show: true },
  { key: "createUserName", name: "创建人", show: true },
  { key: "createTime", name: "创建时间", show: true }
];

export default {
  name: "taskCondition",

  data() {
    return {
      tableName:"biz_ent_base",
      key: 1,
      showItemList: defaultFormThead,
      allItemList: defaultFormThead,
      checkAll: true,
      isIndeterminate: false,
      formShow: false,
      ids: [],
      searchForm: {
        entName: ""
      },
      tableData: [],
      pager: {
        page: 0,
        size: 10,
        total: 0
      },
      total: 0,
      pageSize: 10,
      currentPage: 1
    };
  },
  computed: {
    height() {
      return `calc(100vh - 350px)`;
    }
  },
  watch: {
    showItemList(valArr) {
      for (let key in this.allItemList) {
        this.allItemList[key].show = false;
        for (let key1 in valArr) {
          if (this.allItemList[key].key == valArr[key1].key) {
            this.allItemList[key].show = true;
          }
        }
      }
      this.$nextTick(() => {
        this.$refs.dragTable.doLayout();
      });
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === defaultFormThead.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < defaultFormThead.length;
    },
    handleCheckAllChange(val) {
      this.showItemList = val ? defaultFormThead : [];
      this.isIndeterminate = false;
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [
          "序号",
          "真实姓名",
          "登陆账号",
          "固定电话",
          "启用状态",
          "创建日期"
        ];
        const filterVal = [
          "id",
          "realName",
          "username",
          "telephone",
          "userStatus",
          "createTime"
        ];
        const data = this.formatJson(filterVal, this.tableData);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "table-list-user"
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },

    dateFormatter(row) {
      return this.formatDate(row.createTime, "yyyy-MM-dd HH:mm:ss");
    },
    addEntBase() {
      this.$router.push({ path: "/ent/tab/add/1" });
    },
    view(row) {
      this.$router.push({
        path: "/ent/entDisplay/entMain",
        query: { entId: row.id }
      });
    },
    edit(row) {
      this.$router.push({ path: "/ent/tab/edit/"+row.id });
    },
    // 获取条件列表
    init: function() {
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        entName: this.searchForm.entName
      };
      this.$api.formPost("/api/biz/ent/doGetListByFr", params).then(res => {
        if (res.retHead.code == "0000000") {
          this.tableData = res.retBody.list;
          // this.pager.total = res.retBody.total;
          this.total = res.retBody.total;
        } else {
          this.$message({
            type: "error",
            message: res.retHead.message
          });
        }
      });
    },

    sizeChange(n) {
      this.pageSize = n;
      this.init();
    },
    currentChange(n) {
      this.currentPage = n;
      this.init();
    },
    handleSelectionChange: function(val) {
      this.ids = val;
    }
  }
};
</script>
